<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flex项目</title>

        <style type="text/css">

            .container { display: flex ; width: 800px ; height: 100px ; margin: 50px auto ; border: 2px solid blue ; }

            .first.container { flex-flow: row nowrap ; align-content: stretch ; }
            /* flex : flex-grow  flex-shrink flex-basis */
            .first.container .one { flex : 1 1 200px ; background : #ffff00 ; }
            .first.container .two { flex : 1 1 300px ; background : #dedede ; }
            .first.container .three { flex : 1 1 150px ; background : #ffff00 ; }

            .second.container { flex-flow: row nowrap ; align-content: stretch ; }
            /* flex : flex-grow  flex-shrink  flex-basis */
            .second.container .one { flex : 1 0 200px ; background : #ffff00 ; }
            .second.container .two { flex : 1 0 300px ;  background : #dedede ; }
            .second.container .three { flex : 1 0 100px ; background : #ffff00 ; }

        </style>

    </head>

    <body>

        <div class="container first">
            <span class="item one"></span>
            <span class="item two"></span>
            <span class="item three"></span>
        </div>

        <div class="container second">
            <span class="item one"></span>
            <span class="item two"></span>
            <span class="item three"></span>
        </div>

    </body>

</html>